/*
 * @Description: 车辆信息组件
 * @Author: buwei.huang
 * @Date: 2019-07-10 16:54:17
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-08-28 17:29:44
 */
<template>
  <div
    class="or_carInfo"
    :style="isShowAll ? 'padding-bottom:0' : ''"
    v-show="dataInfo.state == STATE_SUCCESS && dataInfo.driverList.length > 0"
  >
    <template v-for="(item,index) in dataInfo.driverList">
      <order-from-item
        :labelName="item.licenseNumPrefix + item.licenseNumSuffix"
        :leftColor="'#000000'"
        class="or_carInfo_phone"
        :key="index"
        v-if="index >2 ? !isSeeAll : true"
      >
        <div
          slot="slot_info"
          class="flex-h flex-hsb flex-vc"
        >
          <span>{{item.driverName}}</span>
          <i
            class="icon iconfont icon-phone fontsize32"
            @click="onPhone(item)"
          />
        </div>
      </order-from-item>
    </template>
    <div
      class="isSeeAll baseColorNoAcitve"
      v-if="isShowAll"
      @click="onSeeAll"
    >
      展开查看全部
      <i class="icon iconfont icon-downangel fontsize20" />
    </div>
  </div>
</template>
<script>
import OrderFromItem from './OrderFromItem'
export default {
  components: {
    'order-from-item': OrderFromItem
  },
  props: {
    dataInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      isSeeAll: true,
      STATE_SUCCESS: '2' // 预约成功
    }
  },
  computed: {
    isShowAll() {
      return this.isSeeAll && this.dataInfo.driverList && this.dataInfo.driverList.length > 3
    }
  },
  methods: {
    onSeeAll() {
      this.isSeeAll = !this.isSeeAll
    },
    // 拨号
    onPhone(item) {
      window.location.assign('tel:' + item.driverPhone)
    }
  }
}
</script>
<style>
.or_carInfo {
  background-color: #fff;
  margin: 20px 32px 32px;
  border-radius: 16px;
  padding: 32px 0;
  box-sizing: border-box;
  box-shadow: 0px 5px 10px 10px rgb(51, 51, 51, 0.05);
}
.or_carInfo .font {
  font-size: 16px; /* no */
  line-height: 44px;
}
.or_carInfo_title {
  margin-bottom: 32px;
}
.or_carInfo_phone .icon {
  color: #027aff;
  margin-left: 24px;
}
.or_carInfo .isSeeAll {
  height: 68px;
  line-height: 68px;
  text-align: center;
}
</style>
